<template>
	<view class="list-item" @click="onClick(data)">
		<view class="item-type" style="color: #2AC845;border: 1px solid #2ac845;" v-if="data.rouType==1">例行任务</view>
		<view class="item-type" style="color: #FF5D5D;border: 1px solid #FF5D5D;" v-else-if="data.rouType==2">临时任务</view>
		<view class="item-type" style="color: #2A83FF;border: 1px solid #2A83FF;" v-else-if="data.rouType==3">业主报修</view>
		<view class="item-type" style="color: #FFAC38;border: 1px solid #FFAC38;" v-else-if="data.rouType==4">报事</view>
		<view class="item-title">{{data.rouName}}</view>
		<view class="item-desc">
			<text  v-if="data.rouType!==4" class="details">{{data.rouDetails}}</text>
			<view class="time"> <text class="iconfont icon-web-icon-"></text> {{data.rouCD}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			data:Object
		},
		methods: {
			onClick(item) { // 将对应的data 传递给父级组件

				let {rouID,rouType,gtaID} = item // 对象解构赋值
				
				this.$emit('onDetail',{rouID,rouType,gtaID}) 
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/scss/common.scss";
	@import "../../common/scss/iconfont.css";

	.list-item{
			margin: 0 ws(15);
			padding: ws(15);
			background-color: #fff;
			border-radius: ws(5);
			box-shadow: 0 ws(1) ws(4) 0 rgba(7, 17, 27, 0.1);
			margin-bottom: ws(15);
			position: relative;
			overflow: hidden;
			&:first-child{
				margin-top: ws(15);
			}
			.item-type{
					display: inline-block;
					height: ws(15);
					display: inline-flex;
					align-items: center;
					font-size: ws(8);
					padding: 0 ws(5);
					color: #2A83FF;
					margin-bottom: ws(8);
			}
			
			.item-title{
					font-size: ws(15);
					margin-bottom: ws(8);
			}
			.item-desc{
					display: flex;
					flex-direction: column;
					font-size: ws(13);
					color: #ababab;
					.details{
							width: 100%;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
					}
					.time{
						display: flex;
						align-items: center;
						.iconfont{
							font-size: ws(16);
							color: #ABABAB;
							margin-right: ws(5);
						}
					}
			}
			.item-designate{
					position: absolute;
					background: lighten(#2A83FF,20%);
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto;
					width: ws(150);
					height: 100%;
					z-index: 1;
					box-shadow: ws(-1) 0 ws(3) rgba(#000,.2);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: ws(20);
					transition: .35s all;
			}
	}
</style>
